<script setup lang='ts'>
import { computed, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { NInput } from "naive-ui";
import html2canvas from "html2canvas";
import HeaderComponent from "./components/Header/index.vue";
import { SvgIcon } from "@/components/common";
import { useAppStore } from "@/store";

const props = defineProps({
  pinyin: Object,
  yuyinmergevideourl: String,
  finalvideourl: String,
});

const appStore = useAppStore();
var pptvideourl = ref("");

var manfacevideourl = ref("");
console.log(appStore.$state.url);

var finalvideoUrl = ref(window.finalvideoUrl || "");
var value = ref("");
const posstyle = computed(() => {
  console.log(appStore.$state.index);
  switch (appStore.$state.index) {
    case 0:
      return {
        left: 0,
        top: 0,
      };
    case 1:
      return {
        left: 0,
        bottom: 0,
      };
    case 2:
      return {
        right: 0,
        top: 0,
      };
    case 3:
      return {
        right: 0,
        bottom: 0,
      };

    default:
      break;
  }
});
// 使用 watch 监听自定义事件，更新 ref 中的数据
watch(
  () => appStore.$state.url,
  (newValue, oldValue) => {
    // 打印接收到的数据
    manfacevideourl.value = "/src/views/chat" + newValue;

    console.log("接收到的数据:", oldValue);
  }
);
onMounted(() => {
  appStore.setFaceVideoUrl("");
  appStore.setFinalVideoUrl("");
});
watch(
  () => props.yuyinmergevideourl,
  (newValue, oldValue) => {
    // 打印接收到的数据
    pptvideourl.value = "/src/views/chat" + newValue;

    console.log("接收到的数据:", newValue);
  }
);
watch(
  () => posstyle,
  (newValue, oldValue) => {
    // 打印接收到的数据
    console.log("接收到的数据:", oldValue);
  }
);
</script>

<template>
  <div class="flex flex-col w-full h-full">
    <!-- v-if="isMobile" -->
    <HeaderComponent />
    <main class="flex-1 overflow-hidden">
      <div
        id="scrollRef"
        ref="scrollRef"
        class="h-full overflow-hidden overflow-y-auto"
      >
        <div
          id="image-wrapper"
          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
        >
          <p class="title">语音生成</p>
          <div class="mb-1 flex" style="margin-top: 10px">
            <div class="w-[300px]" style="margin-right: 20px">
              <p class="title">修改读音</p>
              <n-input
                type="textarea"
                v-model:value="props.pinyin.Pinyins"
                placeholder="拼音"
                round
                clearable
                maxleongth="500"
                show-cunt
                :autosize="{ minRows: 5, maxRows: 50 }"
              />
            </div>
            <div class="w-[300px]">
              <p class="title">PPT备注</p>
              <n-input
                type="textarea"
                v-model:value="props.pinyin.Texts"
                placeholder="文本"
                round
                clearable
                maxlength="500"
                show-count
                :autosize="{ minRows: 5, maxRows: 50 }"
              />
            </div>
          </div>
          <p class="title" style="margin-top: 30px">视频生成</p>
          <div class="flex" style="gap: 20px">
            <div class="finalVideo">
              <p class="title">PPT生成视频</p>
              <video width="100%" controls :src="pptvideourl"></video>
            </div>
            <div class="finalVideo">
              <p class="title">说话人生成视频</p>
              <video width="100%" controls :src="appStore.$state.url"></video>
            </div>
          </div>
          <p class="title" style="margin-top: 30px">教学视频</p>
          <div class="flex">
            <div class="finalVideo" style="position: relative; width: 620px">
              <div :style="posstyle" class="imgpos">
                <div class="box"></div>
              </div>
              <video
                width="100%"
                controls
                :src="appStore.$state.finalvideourl"
              ></video>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<style scoped>
.title {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.flex {
  justify-content: center;
}
.imgpos {
  position: absolute;

  z-index: 99;
}
.box {
  width: 150px;
  height: 150px;
  border: 2px solid #fff;
}
video {
  width: 250px;
}
.finalVideo video {
  width: 100%;
}
</style>